<template>
  <div class="app-container _system">
    <div class="content">
      <el-form ref="submitInfo" :model="form" label-width="110px" :label-position="`top`">
        <el-form-item label="提词框默认设置" prop="color">
          <div class="colorList" :style="'width:'+(colorList.length*34+10 > 380 ? 354:colorList.length*34+10)+'px'" v-if="colorList.length > 0">
            <div class="wp">
              <template v-for="(item,index) in colorList">
                <div class="color" :key="index" :style="'background-color:'+item">
                  <span class="el-tag__close el-icon-close" @click="colorClose(index)"></span>
                </div>
              </template>
            </div>
            <el-color-picker class="colorPicker" v-model="form.color" @change="changeColorPicker" size="medium"></el-color-picker>
          </div>
          <el-color-picker class="colorPicker" v-if="colorList.length ===0" @change="changeColorPicker" v-model="form.color" size="medium"></el-color-picker>
          <div class="setup_lines">
            <div class="label">字体大小</div>
            <div class="slider">
              <el-slider v-model="fontSize"></el-slider>
            </div>
          </div>
          <div class="setup_lines">
            <div class="label">透明度</div>
            <div class="slider">
              <el-slider v-model="backGroundTransparency"></el-slider>
            </div>
          </div>
          <div class="setup_lines">
            <div class="label">滚动速度</div>
            <div class="slider">
              <el-slider v-model="scrollSpeed"></el-slider>
            </div>
          </div>
          <div class="setup_lines">
            <div class="label">已读区域高度</div>
            <div class="slider">
              <el-slider v-model="readHeight"></el-slider>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="题词面板默认背景色">
          <div class="colorList" :style="'width:'+(colorList.length*34+10 > 380 ? 354: colorList.length*34+10)+'px'" v-if="colorList.length">
            <div class="wp">
              <template v-for="(item,index) in colorList">
                <div class="color" :key="index" :style="'background-color:'+item">
                  <span class="el-tag__close el-icon-close" @click="bgColorClose(index)"></span>
                </div>
              </template>
            </div>
            <el-color-picker class="colorPicker" v-model="form.backGroundColor" @change="changeColorPicker" size="medium"></el-color-picker>
          </div>
          <el-color-picker class="colorPicker" v-if="colorList.length ===0" @change="changeColorPicker" v-model="form.backGroundColor" size="medium"></el-color-picker>
        </el-form-item>
        <el-form-item label="开启分享活动" prop="share">
          <el-switch v-model="form.commissionOff" active-color="#13ce66" inactive-color="#ff4949" active-value="YES" inactive-value="NO">
          </el-switch>
        </el-form-item>
        <el-form-item label="客服微信" prop="kefu">
          <el-input size="small" type="input" style="width:400px;float: left;margin-right: 20px;" v-model="form.tel"></el-input>
          <div class="tis">填写电话</div>
        </el-form-item>
        <el-form-item label="官方邮箱" prop="tel">
          <el-input size="small" type="input" style="width:400px;float: left;margin-right: 20px;" v-model="form.email"></el-input>
          <div class="tis">官方邮箱</div>
        </el-form-item>
        <el-form-item label="版权信息" prop="copyright">
          <el-input size="small" type="textarea" style="width:400px;float: left;margin-right: 20px;" v-model="form.copyright"></el-input>
          <div class="tis">版权信息</div>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button v-loading="loading" size="small" type="primary" @click="submit">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppSetup',
  data () {
    return {
      id: '',
      form: {},
      loading: false,
      colorList: [],
      fontSize: 0,
      scrollSpeed: 0,
      readHeight: 20,
      language: 'CH',
      messageSend: 'ON',
      backGroundTransparency: 0,
      upload_type_all: [{
        value: '1',
        label: '本地'
      }, {
        value: '2',
        label: '七牛云'
      }],
      edit_type_all: [{
        value: '1',
        label: 'Ueditor'
      }, {
        value: '2',
        label: 'Makdown'
      }],
      colse_type_all: [{
        value: '1',
        label: '开启'
      }, {
        value: '2',
        label: '关闭'
      }]
    };
  },
  props: {
    value: {
      type: Object
    }
  },
  created () {
    this.getSystemInfo();
  },
  methods: {
    async getSystemInfo () {
      const { code, data } = await this.$API.systemInfo();
      if (code === 200) {
        this.id = data.id;
        this.fontSize = data.fontSize;
        this.scrollSpeed = data.scrollSpeed;
        this.readHeight = data.readHeight || 0;
        this.form.tel = data.wechat;
        this.form.email = data.email;
        this.form.color = data.colorSize;
        this.form.copyright = data.copyRight;
        this.form.backGroundColor = data.backGroundColor;
        this.colorList = data.colorArray.replace(/(\[|\]|'|"|\s*)/g, '').split(',');
        this.form.commissionOff = data.commissionOff;
        this.backGroundTransparency = data.backGroundTransparency;
      }
    },
    colorClose (index) {
      this.colorList.splice(index, 1);
    },
    changeColorPicker (data) {
      data && this.colorList.push(data);
    },
    submit () {
      if (this.loading) return;
      this.loading = true;
      this.$refs['submitInfo'].validate(async valid => {
        if (valid) {
          const { code, message } = await this.$API.systemSave(this.id, {
            id: this.id,
            modifyTime: Date.now(),
            fontSize: this.fontSize,
            colorArray: JSON.stringify(this.colorList),
            colorSize: this.form.color,
            wechat: this.form.tel,
            email: this.form.email,
            copyRight: this.form.copyRight,
            commissionOff: this.form.commissionOff,
            backGroundTransparency: this.backGroundTransparency,
            backGroundColor: this.form.backGroundColor,
            scrollSpeed: this.scrollSpeed,
            messageSend: this.messageSend,
            readHeight: this.readHeight,
          })
            .catch(() => {
              this.loading = false;
            });

          if (code === 200) {
            this.$message.success('保存成功!');
          } else {
            this.$message.error(message);
          }
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        } else {
          this.loading = false;
          this.$message.error(valid.message);
        }
      });
    }
  }
};
</script>

<style lang="less">
._system {
  padding-bottom: 40px;
  padding-top: 5px;
  .setup_lines {
    width: 400px;
    display: flex;
    margin: 0 0 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    .label {
      width: 120px;
      line-height: 36px;
      font-size: 12px;
      color: #666;
    }
    .slider {
      flex: 1;
    }
  }
  .setup_lines:first-child {
    border-top: 1px solid #eee;
  }
  .colorList {
    padding: 10px 0 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    background-color: rgba(0, 0, 0, 0.1);
    width: 390px;
    position: relative;
    ::after {
      display: block;
      content: '';
      height: 0;
      clear: both;
    }
    .wp {
      padding: 0 5px;
    }
    .colorPicker {
      position: absolute;
      top: 3px;
      right: -44px;
    }
    .color {
      width: 24px;
      height: 24px;
      float: left;
      margin: 0 5px 10px;
      border-radius: 2px;
      position: relative;
      .el-icon-close {
        position: absolute;
        display: none;
        top: -5px;
        font-size: 12px;
        border-radius: 50%;
        color: #fff;
        background-color: rgba(3, 3, 3, 0.6);
        right: -5px;
      }
      &:hover {
        .el-icon-close {
          display: block;
        }
      }
    }
  }
}
</style>
